<template>
  <div id="moban">  

    <el-form ref="form" :model="form" label-width="80px">  
     <el-row> 
          <el-col :span="24" style="display:flex;">

          <el-form-item label-width="0px" >
                <el-select  v-model="form.select_num" placeholder="请选择用户类别" @change="select_change">
                    <el-option  v-for="(item,index) in select_data" :key="index" :label="item.name" :value="item.id"></el-option>
                </el-select>
          </el-form-item>

          <el-form-item label-width="0px" style="margin-left:10px;">
            <el-input v-model="form.phone" placeholder="姓名/手机号"></el-input>
          </el-form-item>

           <div class="custom_button2"  style="margin-left:10px;" @click="search_but1()"></div>
        </el-col>
       
    </el-row>

      <el-row> 
          <el-col :span="20" style="display:flex;">

          <!-- <el-form-item label-width="0px" >
                <el-select  v-model="form.select_num_jb" placeholder="请选择级别" >
                    <el-option  v-for="(item,index) in select_data_jb" :key="index" :label="item.name" :value="item.id" ></el-option>
                </el-select>
          </el-form-item> -->
          
         
          <el-form-item :label="variable_name1" label-width="50px" >
                <div style="display: flex;">
                    <el-input style="width:80px;" v-model.number="form.gm1" placeholder=""></el-input>
                    <div style="width:20px;height:40px;line-height:40px;text-align: center;"> - </div>
                    <el-input  style="width:80px;" v-model.number="form.gm2" placeholder=""></el-input>
                </div>
          </el-form-item> 

          <el-form-item :label="variable_name2" label-width="50px" >
                <div style="display: flex;">
                    <el-input style="width:80px;" v-model.number="form.jd1" placeholder=""></el-input>
                    <div style="width:20px;height:40px;line-height:40px;text-align: center;"> - </div>
                    <el-input  style="width:80px;" v-model.number="form.jd2" placeholder=""></el-input>
                </div>
          </el-form-item> 

           <el-form-item label="好友" label-width="50px" >
                <div style="display: flex;">
                    <el-input style="width:80px;" v-model.number="form.td1" placeholder=""></el-input>
                    <div style="width:20px;height:40px;line-height:40px;text-align: center;"> - </div>
                    <el-input  style="width:80px;" v-model.number="form.td2" placeholder=""></el-input>
                </div>
          </el-form-item> 
            
           <div class="custom_button2"  style="margin-left:10px;" @click="search_but2()"></div>
        </el-col>

        <el-col :span="4" style="text-align: center;display: flex;justify-content: flex-end;">
            <div class="custom_button_width" @click="sx_but">刷新</div>
        </el-col>
       
    </el-row>
    
   </el-form>

   <!-- 渲染数据list -->
   <consumer-list :consumerdata="consumerdata" @up_list_fun="list_fun"> </consumer-list >

      
   <div style="margin-top:20px;text-align: center;">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="10"  
        layout="prev, pager, next, jumper"
        :total="count">
      </el-pagination>
    </div>

    

      
  </div>
</template>

<script>
import ConsumerList from '@/view/Consumer/ConsumerList'
export default {
  name: 'moban',
  data () {
    return {
        consumerdata:[],
        page:1,
        count:0,
        form:{
            phone:'',
            select_num:'',
            select_num_jb:'',
            gm1:'',
            gm2:'',
            jd1:'',
            jd2:'',
            td1:'',
            td2:'',
        },
        search_lx:0,
        select_data:[{"id":0,"name":"用户"},{"id":1,"name":"推荐人"}],
        select_data_jb:[{"id":0,"name":"全级别"},{"id":1,"name":"级别1"},{"id":2,"name":"级别2"},{"id":3,"name":"级别3"},{"id":4,"name":"级别4"}]
    }
  },
 components:{
    ConsumerList
  },
  created(){
    

    this.list_fun()
  },
  mounted (){
    
  },
  methods: {
      list_fun(){
          this.post("/member/listOfData", {
              page:this.page,
              search_num:this.search_lx,
              recommend:this.form.select_num,
              telOrName:this.form.phone,
              experience:this.form.select_num_jb,
              kmb_start:this.form.gm1,
              kmb_end:this.form.gm2,
              gdb_start:this.form.jd1,
              gdb_end:this.form.jd2,
              team_start:this.form.td1,
              team_end:this.form.td2,
	        }).then(res => {
            this.count = res.result.count
            this.consumerdata = res.result.list

              for(let item of this.consumerdata) {
               
                for(let a of item.qr_code) {
                   if(a.collection_type == 1){
                      item.srcListwx = a.collection_picture
                      item.srcList1 = [this.urlimg + a.collection_picture]
                   }else if(a.collection_type == 2){
                      item.srcListzfb = a.collection_picture
                      item.srcList2 = [this.urlimg + a.collection_picture]
                   }else if(a.collection_type == 3){
                      item.srcListysf = a.collection_picture
                      item.srcList3 = [this.urlimg + a.collection_picture]
                   }else if(a.collection_type == 4){
                      item.srcListjh = a.collection_picture
                      item.srcList4 = [this.urlimg + a.collection_picture]
                   }else if(a.collection_type == 5){
                      item.srcListyhk = a.collection_picture
                      item.srcList5 = [this.urlimg + a.collection_picture]
                   }
                }

                item.tx_picture = [this.urlimg + item.head_img]
               
                    
             }

            console.log(res)
         })
      },
      search_but1(){
          this.page = 1
          this.search_lx = 1
          this.list_fun()
      },
      search_but2(){
           this.page = 1
           this.search_lx = 2
           this.list_fun()
      },
      sx_but(){
          this.search_lx = 0
          this.form={
            phone:'',
            select_num:'',
            select_num_jb:'',
            gm1:'',
            gm2:'',
            jd1:'',
            jd2:'',
            td1:'',
            td2:'',
          }
          this.page = 1
          this.list_fun()
      },
     select_change(){
         console.log(this.form.select_num)
     },
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.page = val
        this.list_fun()
        console.log(`当前页: ${val}`);
      }
  }
}
</script>


<style scoped>

</style>
